<template>
  <a-spin :spinning="spinning">
    <track-list :tracks="songs" @dblclick="play" @download="download">
      <div slot="lyric" slot-scope="{ row }" class="lyrics-wrapper">
        <div class="lyrics">
          <div v-for="(text, index) in row.lyrics.showAll ? row.lyrics.lines : row.lyrics.lines.slice(0, 4)" :key="index" class="line">{{ text }}</div>
        </div>
        <div class="actions">
          <a-button size="small" @click.stop="toggleSpread(row.lyrics)" @dblclick.stop style="margin-right: 3px">{{ row.lyrics.showAll ? '收起歌词' : '展开歌词' }}</a-button>
          <a-button size="small" @click="copyLyric(row.lyrics.lines.join(','))">复制歌词</a-button>
        </div>
      </div>
    </track-list>
    <slot :total="result.songCount"></slot>
  </a-spin>
</template>

<script>
import searchMixin from '@/mixins/Search'
import { normalSong } from '@/utils/song'
import TrackList from '@/components/Common/track-list/index.js'
export default {
  mixins: [
    searchMixin
  ],
  data () {
    return {
      songs: []
    }
  },
  methods: {
    normalData () {
      if (this.result && this.result.songs) {
        let songs = this.result.songs.map(song => {
          return {
            ...normalSong(song),
            lyrics: {
              lines: (song.lyrics && song.lyrics.txt.split('\n')) || [],
              showAll: false
            }
          }
        })
        this.songs = Object.freeze(songs)
      }
      this.spinning = false
    },
    async play (tracks, index) {
      this.$store.dispatch('play/selectPlay', { tracks, index })
    },
    download (song) {
      this.$store.dispatch('Download/download', song)
    },
    toggleSpread (lyrics) {
      this.$set(lyrics, 'showAll', !lyrics.showAll)
    },
    copyLyric (lyric) {
      this.$electron.clipboard.writeText(lyric)
      this.$toast({
        icon: 'check',
        content: '复制成功'
      })
    }
  },
  components: { TrackList }
}
</script>

<style lang="less" scoped>
.lyrics-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 100px 0 100px;
  background: #fff;
  &:hover {
    background: #eee;
  }
  .line {
    font-size: 13px;
    line-height: 22px;
  }
  .actions {
    margin-top: 20px;
  }
  .lyrics {
    padding: 6px;
  }
}
</style>
